<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Login</title>
 <style>
  .header{
    width: 100%;
    height: 15%;
   
  }
  .header_title{
    font-family: cursive ;  /*把 font-family: "设置字体名称" 里的字体名称改成你需要*/
    /* //字体大小 */
    font-size:42px ;
    /* //字体颜色 */
    color:rgb(45, 113, 172) ;
    /* //加粗 normal默认值 bold粗体 数值100-900 */
    font-weight:normal;
  }
.BackImg{
    position:absolute;
    z-index: -1;/*置于底层*/
    width: 100% ;
    height: 700px;
}
.Loginform{
  border: 1px solid white;
  position:absolute;
  font-size: 20px;
  z-index: 1;/*置于上层*/
}


/*  */


        .sign-div {
            width: 400px;
            height: 300px;
            text-align: center;
            outline: none;
            border: 1px solid rgb(94, 92, 233);
            border-radius: 8px;
            background-color: rgba(172, 235, 243, .2);
            box-sizing: border-box;

        
            /* 实现整个框居中效果 */
            position: relative;
            top: 270px;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;

        }
        .sign-div2{
          width: 400px;
            height: 300px;
            text-align: center;
            outline: none;
            border: 1px solid rgb(94, 92, 233);
            border-radius: 8px;
            background-color: rgba(172, 235, 243, .2);
            box-sizing: border-box;
            /* 实现整个框居中效果 */
            position: relative;
            top: -30px;
            left: 83%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            

        }

        .sign-div h1 {
            margin-bottom: 10px;
            color: rgb(29, 26, 26);
        }

        input {
            width: 250px;
            height: 34px;
            border: none;
            /* 元素周围的轮廓无效 */
            outline: none;
            /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 */
            box-sizing: border-box;
            display: block;
            padding: 0 16px;
        }

        .input-text {
            margin: 5px auto;
            border-radius: 16px;
        }

        .input-text:hover {
            border: 0.5px solid rgb(76, 76, 233);
            transition: 0.5s;
            border-radius: 4px;
        }

        .input-btn {
            text-align:  center;
            margin: 20px auto 20px;
            border-radius: 44px;
            cursor: pointer;
            background-color: rgba(84, 175, 249, 0.8);
        }

        .input-btn:hover {
            color: #fff;
            font-size: 16;
            border-radius: 4px;
            transition: 0.5s;
            background-color: rgba(10, 138, 243, 0.8);
        }

        .sign-div .a {
          background-color: rgba(148, 192, 228, 0.8);
          width: 100%;
          text-align: center;
          text-decoration: none;
            color: rgb(143, 37, 214);
            font-size: 14px;
            padding: 10px;
            transition: 0.8s;
            display: block;
        }

        .a:hover {

          color: #FFF;
            background: rgba(0, 0, 0, .3);
            border-radius: 8px;

            font-size: 16;
            border-radius: 4px;
            transition: 0.5s;
         

        }


        .option select{
  
  border-radius: 5px;
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  /*将select的宽高等于div的宽高*/
  width: 40%;
    height: 38px;
    line-height: 40px;
  /*隐藏select的下拉图标*/
  appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  /*通过padding-left的值让文字居中*/
  padding-left: 20px;
  }

 
 </style>

</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="qs.js"></script>
 
 
  <div id="app"  >
    
    <div class="header"><span class="header_title"> 大学实验开放平台 | 登录认证 </span> 
     
    </div>

    
       
    <div style="position:relative">
        <img   class="BackImg"src="./img/login1.jpg"  alt="">
        
        
        <div class="sign-div" >
            <form class="" action="#" method="POST" >
                <h1>登录</h1>
                <input class="input-text" type="text" name="username" v-model="formData.username" placeholder="用户名">
                <input class="input-text" type="password" v-model="formData.password" placeholder="密码">
                <input class="input-btn" type="" value="登录" @click="login($event)">
               
               
                <input class="a" type="" value="注册" @click="c">
                
            </form>

           
        </div>


        <div class="sign-div2" v-show="isShowRegistry" >
            <form class="" action="#" method="POST" >
                <h1>注册</h1>
                <input class="input-text" type="text" name="username" v-model="RformData.username" placeholder="用户名">
                <input class="input-text" type="password" v-model="RformData.password" placeholder="密码">
                <input class="input-text" type="text" v-model="RformData.nickname" placeholder="昵称">
                <div class="option">
                  <select name="" v-model="RformData.role">
                    <option value="teacher">教师</option>
                    <option value="student">学生</option>
                  </select>
                </div>
                <input class="input-btn" type="" value="注册" @click="Registry($event)">
              
            </form>

        
        </div>
        

        
        

    </div>
         
   
  </div>

  <script>
   var app = new Vue({
    el:"#app",
  
  data(){
    
  return {
    isShowRegistry: false,
    s:"",
    formData: {
      username: "",
      password: "",
      role:"",
      id:"1"
  },
  RformData: {
      username: "",
      password: "",
      nickname:"",
      role:"teacher"
     
  },

}
},
  methods:{

      c:function(){
       this.isShowRegistry = !this.isShowRegistry;
       console.log(this.isShowRegistry)
      },

      getJoke:function(){

       var that = this;

       axios.get("https://autumnfish.cn/api/joke")
      .then(function(response){
          console.log(response.data);
          that.joke = response.data;
      },function(err){
          console.log(err);
      })

  },
    
  onSubmit(event) {
    event.preventDefault();
    const _this = this;
    

    axios({

    method: 'post',

    url: "http://localhost:8081/index",

    headers: {

        'Content-Type': 'application/json;'

    },
    data: JSON.stringify(_this.formData),


    }).then (function (response) {

      console.log(_this.formData);
    console.log(response.data);

    }).catch (function (error) {


    console.log("error.data");
    console.log(_this.formData);
    });

      }
   ,
  
   onGet(event){
    event.preventDefault();
    const _this = this;
    
    axios({
method: 'get',
url: "http://localhost:8081/get/"+_this.formData.id,
headers: {
    'Content-Type': 'application/json;'
},}).then (function (response) {

  console.log(_this.formData);
console.log(response.data);

}).catch (function (error) {


console.log("error.data");
console.log(_this.formData);
});


   }   

  
  , login(event){
    event.preventDefault();
    const _this = this;
    
    axios({
method: 'get',
url: "http://localhost:8081/admin/login/"+_this.formData.username+"/"+_this.formData.password,
headers: {'Content-Type': 'application/json;'},
}).then (function (response) {

  console.log(response.data)
if(response.data.code!=200){
  alert(response.data.msg);
  console.log("111erroe")
}
 
console.log(response.data.data.role);
if(response.data.data.role == 'admin'||response.data.data.role=="teacher"){
 
console.log("111");
  //this.$router.push("admin.html" );
  window.location.href="admin.html?id="+response.data.data.id+"&nickname="+response.data.data.nickname+"&role="+response.data.data.role;
//console.log("111222");
}


}).catch (function (error) {
alert("error");
console.log("error.data");
});


   }   

  , Registry(event) {
    event.preventDefault();
    const _this = this;
    if(_this.RformData.username==""||_this.RformData.password==""||_this.RformData.password.nickname==""||_this.RformData.role==""){
      alert("注册参数不全！");
      return;
    }

    axios({

    method: 'post',

    url: "http://localhost:8081/admin/regisyry",

    headers: {

        'Content-Type': 'application/json;'

    },
    data: JSON.stringify(_this.RformData),


    }).then (function (response) {

      alert(response.data.data);
   //   console.log(_this.RformData);
  //  console.log(response.data);

    }).catch (function (error) {


    console.log("error.data");
    console.log(_this.formData);
    });

      }
       

}

      
  })
  </script>


</body>
</html>